<!DOCTYPE html>
<html>
<head>
	<title>react表单</title>
	<meta charset="utf-8"/>
	<script src="./bower_components/react/react.js"></script>
	<script src="./bower_components/react/react-dom.js"></script>
	<script src="./bower_components/babel/browser.js"></script>

	<style>
		

	</style>
</head>
<body>
	<div id='app'></div>

	<script type="text/babel">

		class MyForm extends React.Component {
			constructor() {
				super();
				this.state = {
					contries: []
					//contries: ['中国','俄罗斯','巴基斯坦','印度','古巴']
				}
			}

			componentWillMount() {
				console.log('开始获取数据');
				//this.setState({
				//	contries: ['中国','俄罗斯','巴基斯坦','印度','古巴'] 
				//})
				// setTimeout(() => {
				// 	console.log('this=>', this)
				// 	this.setState({
				// 		contries: ['中国','俄罗斯','巴基斯坦','印度','古巴']						
				// 	}) 
				// }, 3000)
				// setTimeout(() => {
				// 	console.log('this=>', this)
				// 	this.setState({
				// 		contries: ['中国','俄罗斯','巴基斯坦','印度','古巴']						
				// 	})
				// }, 3000)
				this.ajaxToData();
			}

			ajaxToData() {
				let oAjax = new XMLHttpRequest();
				oAjax.open('GET', 'http://localhost:2831/get', true);
				oAjax.send();
				oAjax.onload = function() {
					if (oAjax.status == 200) {
						//console.log(oAjax.responseText);
						let resultJson = JSON.parse(oAjax.responseText);
						this.setState({
							contries: resultJson
						})
					}
				}.bind(this); 
			}

			render() {
				let countryLis = [];
				this.state.contries.forEach((value, index) => {
					countryLis.push(<li key={index}>{value}</li>);
				})

				console.log(this.state.contries.length);

				return (
					<div>
						<input type="text" defaultValue='123' /> <br/>
						<input type="checkbox" defaultChecked /> <br/>
						<div style={{display: this.state.contries.length > 0?'none': 'block'}}>暂无数据</div>
						{countryLis}
					</div>
				)
			}
		}

		ReactDOM.render(<MyForm />, app);
	</script>

</body>
</html> 